<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#wrap11{
			background-color: rgba(0,0,0,0);
			position: relative;
			height: 1000px;
			width: 500px;
			background-color: red;
			}
			#mask{
				background: no-repeat;
				background-image:url(images/pagesix/linemask.png)  ;
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div id="wrap11">
			<img src="images/pagesix/line.png" id="simg1"/>
			
			<div id="mask"></div>
			
		</div>
		<canvas id="myCanvas" width="500" height="500"></canvas>
		<script type="text/javascript">
		var canvas=document.getElementById("myCanvas");
		var  context=canvas.getContext("2d");
		context.beginPath();
		var radialG =  context.createRadialGradient(200,250,30,250,250,200);	//--
		//设置渐变比例和颜色
//		addColorStop();
		radialG.addColorStop(0,"red");
		radialG.addColorStop(0.2,"yellow");
		radialG.addColorStop(0.4,"green");
		radialG.addColorStop(0.6,"pink");
		radialG.addColorStop(0.8,"orange");
		radialG.addColorStop(1.0,"gold");
		context.fillStyle=radialG;
		//绘制一个矩形
		context.fillRect(100,100,400,400);
		</script>
	</body>
</html>
